/**
 * Created with hong.rong
 * Date:2020/07/06
 */

import React from 'react'
import { isFunction } from 'lodash'
import { Input, Row, Col, Form, Button, Cascader } from 'antd'
import Modify from './Modify'
import areas from '@/constant/area'

const FormItem = Form.Item

export default function SearchComp({ onSearch, refreshList }) {
  const [form] = Form.useForm()

  const handleFieldChange = async () => {
    const values = await form.validateFields()
    isFunction(onSearch) && onSearch(values)
  }
  return (
    <div className="overflow-hidden">
      <Form form={form}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <FormItem name="leader">
              <Input placeholder="负责人/手机号" />
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="自提点" name="carryName">
              <Input placeholder="请输入" />
            </FormItem>
          </Col>
          <Col span={6}>
            <Form.Item label="区域">
              <Cascader
                changeOnSelect
                options={areas}
                placeholder="请选择"
                onChange={(_, o) => {
                  if (o[0]) {
                    form.setFieldsValue({ provinceCode: o[0].value })
                  }
                  if (o[1]) {
                    form.setFieldsValue({ cityCode: o[1].value })
                  }
                  if (o[2]) {
                    form.setFieldsValue({ areaCode: o[2].value })
                  }
                }}
              />
            </Form.Item>
            <Form.Item noStyle name="provinceCode">
              <Input type="hidden" />
            </Form.Item>
            <Form.Item noStyle name="cityCode">
              <Input type="hidden" />
            </Form.Item>
            <Form.Item noStyle name="areaCode">
              <Input type="hidden" />
            </Form.Item>
          </Col>
          <Col span={6} style={{ textAlign: 'right' }}>
            <div className="ub ub-row ub-ac ub-sb">
              <Button type="primary" onClick={handleFieldChange}>
                查询
              </Button>
              <Modify refreshList={refreshList}>
                {show => (
                  <Button
                    type="primary"
                    onClick={() => show(Modify.TYPE.CREATE.VALUE)}
                  >
                    新增自提点
                  </Button>
                )}
              </Modify>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
  )
}
